<template>
  <view class="common-header">
    <image src="@/static/common/header.png" mode="widthFix" class="header-bg" />
    <text v-if="showTitle" class="title">{{ title }}</text>
    <view v-if="showBack" class="back" @click="goBack">
        <image src="@/static/common/back.png" mode="widthFix"  />
    </view>
    <view v-if="showPic" class="pic">
        <image src="@/static/common/pic.png" mode="widthFix"  />
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  title: {
    type: String,
    default: '页面标题'
  },
   showTitle: {
    type: Boolean,
    default: false // 默认显示标题
   },
  backUrl: {
    type: String,
    default: '' // 不传则返回上一页
  },
   showBack: {
    type: Boolean,
    default: false // 默认显示返回按钮
  },
   showPic: {
    type: Boolean,
    default: false // 默认显示返回按钮
  }
})

function goBack() {
  if (props.backUrl) {
    uni.reLaunch({ url: props.backUrl }) // 或 uni.redirectTo，根据你的需求
  } else {
    uni.navigateBack()
  }
}
</script>

<style lang="scss">
.common-header {
    position: relative;
    height: 521.35rpx;
    .header-bg{
        width: 100%;
        height: 100%;
    }

    .title {
        position: absolute;
        top: 65px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 35rpx;
        font-weight: bold;
        color: #fff;
    }

   .back {
        position: absolute;
        top: 65px;
        left: 40rpx;
        padding:  15rpx;
        transform: translate(-50%, -50%);
        image{
            width: 18.23rpx;
            height: 31.77rpx;
        }
    }
    .pic {
        position: absolute;
        top: 188px;
        right: 20%;
        transform: translate(-50%, -50%);
        image{
            width: 242.19rpx;
            height: 262.5rpx;
        }
    }
}
</style>